<template>
	<view class="card-container">
		<view class="top" @click="goDetail(item)">
			<view class="name">
				{{ blog.userName }}
			</view>
		</view>
		<view class="middle" @click="goDetail(item)">
			<view class="content">
				{{ blog.blogContent }}
			</view>
			<view class="img" v-if="blog.images">
				<view class="item" v-for="(item, index) in blog.images" :key="index">
					<img :src="item" alt="">
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="like">
				<uni-icons type="hand-up-filled" size="30" v-if="likeFlag" @click="removeLike"></uni-icons>
				<uni-icons type="hand-up" size="30" v-else @click="addLike"></uni-icons>
			</view>
			<view class="comment" @click="commentFlag = !commentFlag">
				<uni-icons type="chat-filled" size="30" v-if="commentFlag"></uni-icons>
				<uni-icons type="chat" size="30" v-else></uni-icons>
			</view>
		</view>
		<view class="comInput" v-if="commentFlag">
			<input type="text" class="input" placeholder="请输入评论~" v-model="commentContent">
			<button class="postComment" @click="postComment">发布评论</button>
		</view>
	</view>
</template>

<script setup>
import { defineProps, ref, defineEmits, onBeforeMount } from 'vue';

const props = defineProps({
	blog: {
		type: Object,
		default: () => ({})
	}
});

const emits = defineEmits(['reflash']);

const likeFlag = ref(false);
const commentFlag = ref(false);

const commentContent = ref('');
const userInfo = uni.getStorageSync('userInfo');


onBeforeMount(() => {
	chageLike();
});

const chageLike = () => {
	const { likeBlogs } = uni.getStorageSync('userInfo');
	likeBlogs.forEach(item => {
		console.log(item === props.blog._id, 'itm');

		if (item === props.blog._id) {
			likeFlag.value = true;
			return;
		} else {
			likeFlag.value = false;
		}
	});
};

const postComment = async () => {
	commentFlag.value = false;

	// 进行内容检查
	if (!commentContent.value) {
		uni.showToast({
			title: '内容不能为空',
			icon: 'error'
		});
		return;
	}

	const blogId = props.blog._id;
	const { username } = uni.getStorageSync('userInfo');

	const resp = await uniCloud.callFunction({
		name: 'postComment',
		data: {
			blogId,
			userName: username,
			content: commentContent.value
		}
	});
	console.log(resp.result);

	if (resp.result.code === 0) {
		uni.showToast({
			title: '评论成功',
			icon: 'success'
		});
		// 让父元素刷新数据
		emits('reflash', '');
	} else {
		uni.showToast({
			title: resp.result.msg
		});
	}

};

// 进入详情页
const goDetail = (item) => {
	uni.navigateTo({
		url: `/pages/blogDetail/blogDetail?blog=${JSON.stringify(props.blog)}`
	});
};

const addLike = async () => {
	const { _id } = uni.getStorageSync('userInfo');
	// 文章like + 1
	const resp = await uniCloud.callFunction({
		name: 'updateLikeCount',
		data: {
			blogId: props.blog._id,
			type: 'increase',
		}
	});
	// 加入用户 likeBlogs数组
	const resp2 = await uniCloud.callFunction({
		name: 'updateLikeBlog',
		data: {
			blogId: props.blog._id,
			type: 'add',
			userId: _id
		}
	});
	if (resp.result.code === 0) {
		uni.showToast({
			title: '点赞成功',
			icon: 'success'
		});
		// 让父元素刷新数据
		emits('reflash', '');
		// 更新userInfo
		if (typeof userInfo.likeBlogs !== 'arrary') {
			userInfo.likeBlogs = [];
		}
		userInfo.likeBlogs.push(props.blog._id);
		uni.setStorageSync('userInfo', userInfo);
		likeFlag.value = true;
	}
};

const removeLike = async () => {
	const { _id } = uni.getStorageSync('userInfo');
	// 文章like - 1
	const resp = await uniCloud.callFunction({
		name: 'updateLikeCount',
		data: {
			blogId: props.blog._id,
			type: 'decrease'
		}
	});
	// 剔除用户 likeBlogs数组
	const resp2 = await uniCloud.callFunction({
		name: 'updateLikeBlog',
		data: {
			blogId: props.blog._id,
			type: 'remove',
			userId: _id
		}
	});
	if (resp.result.code === 0) {
		uni.showToast({
			title: '已取消',
			icon: 'error'
		});
		// 让父元素刷新数据
		emits('reflash', '');
		// 更新userInfo
		userInfo.likeBlogs.filter((i) => { i !== props.blog._id; });
		uni.setStorageSync('userInfo', userInfo);
		likeFlag.value = false;
	}
}

</script>

<style lang="scss" scoped>
@import "../../uni.scss";

.card-container {
	width: 90%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	border: 1px solid #ccc;
	padding: 20rpx;
	box-sizing: border-box;
	// box-shadow: 0 0 3rpx 1rpx #ccc;
	background: white;
	border-radius: 20rpx;

	.top {
		display: flex;
		justify-content: space-between;

		.name {
			font-weight: 900;
			font-size: 26px;
			color: $title-color;
			text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		}
	}

	.middle {
		display: flex;
		flex-direction: column;
		border: 1px solid #ccc;
		padding: 8px;
		gap: 8px;

		.conetnt {
			flex-shrink: 0;
		}

		.img {
			width: 100%;
			display: flex;
			gap: 5px;

			.item {
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.bottom {
		display: flex;
		gap: 20rpx;
	}

	.comInput {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;

		.input {
			width: 70%;
			height: 30px;
			border: 1px solid #ccc;
		}

		.postComment {
			width: 150px;
			height: 30px;
			line-height: 30px;
			background-color: $base-color2;

			&:active {
				background-color: $btn-primary-color;
			}
		}
	}
}
</style>